<template>
    <div>
         <div class="block">
    <el-carousel height="400px">
      <el-carousel-item v-for="item in list" :key="item">
        <img :src="item" alt="">
  <button id='understand'>了解更多</button>

      </el-carousel-item>
    </el-carousel>
  </div>

    </div>
</template>

<script>
import s2  from '../assets/img/swiper2.jpg'
import s3  from '@/assets/img/swiper3.jpg'
import s4  from '@/assets/img/swiper4.jpg'
export default {
    name: 'myswiper',
    data() {
        return {
            list:[s2,s3,s4]
        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  img{
      width: 100%;
      height: 100%;
      position: relative;
  }
  #understand{
      width: 200px;
      height: 40px;
      border: 1px solid #111;
      position: absolute;
      top: 270px;
      left: 340px;
      
  }
   #understand:hover{
       background:red;
       color:#fff;
       border: none;
   }
</style>
